<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid grey;
        }
        /*第一种实现方式*/
        .text-ellipsis {
            position: relative;
            overflow: hidden;
            width: 100px; /* 限定宽度 */
        }
        .text-ellipsis::after {
             content: "...";
             position: absolute;
             right: 0;
             top: 0;
             bottom: 0;
             color: #ccc;
         }

        /* 第二种实现方式*/
        .text-ellipsis2 {
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 限定显示行数, 写在第几行就会出现在第几行 */
            -webkit-box-orient: vertical;
        }

        /* 第三种实现方式 ---- 只能支持单行*/
        .text-ellipsis3 {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .text-ellipsis4 {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 限定显示行数 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
  <div class="box text-ellipsis4">
      锚点demo 什么是锚点: 1、实现效果: 2、代码展示: 总结 什么是锚点: 就是当页面内元素过长时,能快速定位到指定元素位置 需要目标元素的name或id属性和a标签的h
  </div>
</body>
</html>
